import { CascaderSelect } from '@alifd/next';
import { CascaderSelectProps } from '@alifd/next/types/cascader-select';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { getCities, getStations } from './api';
import DictTreeSelect from '../DictTreeSelect';


interface IShuttleStationSelect extends CascaderSelectProps {
}

function CcStationSelect({ ...props }: IShuttleStationSelect) {
  return <DictTreeSelect dictId='region' {...props} />
  // const [data, setData] = useState([]);
  // const cities = useRef({}).current;

  // useEffect(() => {
  //   (async function fetchData() {
  //     const items = await getCities();
  //     setData(items.map(mapper));
  //   })();
  // }, []);

  // const mapper = useCallback((v) => {
  //   const isStation = !!v.parentId;
  //   const label = isStation ? v.name : v.name;
  //   const value = isStation ? v.itemId : v.itemId;
  //   const item = {
  //     label,
  //     value,
  //     isLeaf: isStation,
  //     ...v,
  //   };
  //   if (!isStation) cities[value] = item;
  //   return item;
  // }, []);

  // const onLoadData = async (v) => {
  //   const item = cities[v.value];
  //   if (item.children) return;
  //   const children = await getStations(v.value);
  //   item.children = children.map(mapper);
  //   setData((prev) => [...prev]);
  // };

  // return (
  //   <CascaderSelect
  //     hasClear
  //     dataSource={data}
  //     loadData={onLoadData}
  //     // style={{ width: '100%' }}
  //     {...props}
  //   />
  // );
}

export default CcStationSelect;
